<template>
  <div class="form-runtime-task">
    <van-nav-bar class="header"
      left-arrow
      @click-left="onBack()"
    >
      <template #title>
        <p style="font-size: 16px;color: #333333;font-weight: 400;">已办任务</p>
      </template>
      <template #left>
        <van-icon name="arrow-left" size="18" color="#3B3938" />
      </template>
    </van-nav-bar>
    <div class="filter-box">
      <van-search v-model="formFilter.searchString" :placeholder="searchTypeVal === 0?'请输入流程名称':'请输入工单编号'"
        @search="onRefresh" @clear="onClearFilter" left-icon="">
        <template #right-icon>
          <i class="mobile-font icon-search"></i>
        </template>
      </van-search>
    </div>
    <CustomList ref="list" style="padding: 0px 16px; flex-grow: 1; height: calc(100vh - 130px); margin-top: 15px;"
      :loadData="loadRuntimeTask"
    >
      <template slot-scope="scope">
        <TaskCard class="task-item"
          :cardData="getCardData(scope.data)"
          @click.native="onRuntimeTaskClick(scope.data)"
        >
          <van-row slot="menu" class="menu-box" type="flex" justify="space-between" align="center">
            <div class="user-box">
              <van-avatar width="24px" height="24px"
                font-size="12px" round
                style="margin-right: 5px;"
                :src="scope.data.headImageUrl"
                :text="scope.data.showName"
              />
              <span class="userName">{{ scope.data.showName }}</span>
            </div>
            <span style="color: #999999; font-size: 12px;">{{scope.data.createTime}}</span>
          </van-row>
        </TaskCard>
      </template>
    </CustomList>
  </div>
</template>

<script>
import TaskCard from '../components/taskCard.vue';
import CustomList from '@/components/CustomList.vue';
import { FlowOperationController } from '@/api/flowController.js';

export default {
  name: 'formRuntimeTask',
  components: {
    TaskCard,
    CustomList
  },
  data () {
    return {
      formFilter: {
        searchString: undefined
      },
      searchTypeVal: 0,
      searchTypeOption: [
        { text: '流程名称', value: 0 },
        { text: '工单编号', value: 1 }
      ]
    }
  },
  methods: {
    onBack () {
      this.$router.go(-1);
    },
    getCardData (cardData) {
      return {
        title: cardData.processDefinitionName,
        subTitle: [
          '工单编号：' + (cardData.workOrderCode || ''),
          '当前任务：' + (cardData.name || ''),
          '审批操作：' + this.SysFlowTaskOperationType.getValue(cardData.approvalType),
          '审批时间：' + (cardData.endTime || '无')
        ]
      }
    },
    onRefresh () {
      if (this.$refs.list) this.$refs.list.reset();
    },
    onClearFilter () {
      this.formFilter.searchString = undefined;
      this.onRefresh();
    },
    deopdownChange () {
      this.formFilter.searchString = undefined;
    },
    loadRuntimeTask (pageNum) {
      let params = {
        pageParam: {
          pageNum: pageNum,
          pageSize: 10
        },
        processDefinitionName: this.formFilter.searchString
      }
      return new Promise((resolve, reject) => {
        FlowOperationController.listHistoricTask(this, params).then(res => {
          console.log(res.data)
          resolve({
            dataList: res.data.dataList.map(item => {
              return {
                ...item,
                headImageUrl: this.getHeadImageUrl(item)
              }
            }),
            totalCount: res.data.totalCount
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    onRuntimeTaskClick (row) {
      let params = {
        taskId: row.id,
        processDefinitionId: row.processDefinitionId,
        processInstanceId: row.processInstanceId
      }

      FlowOperationController.viewHistoricTaskInfo(this, params).then(res => {
        if (res.data) {
          this.$router.push({
            name: res.data.mobileRouterName || 'handlerFlowTask',
            query: {
              processDefinitionKey: row.processDefinitionKey,
              taskId: row.id,
              processInstanceId: row.processInstanceId,
              processDefinitionId: row.processDefinitionId,
              formId: res.data.formId,
              routerName: row.mobileRouterName,
              readOnly: true,
              flowEntryName: row.processDefinitionName,
              processInstanceInitiator: row.showName,
              taskName: row.name,
              headImageUrl: row.headImageUrl,
              // 在已办理任务中仅显示加签、减签和撤销操作
              operationList: (res.data.operationList || []).filter(item => {
                return item.type === this.SysFlowTaskOperationType.CO_SIGN || item.type === this.SysFlowTaskOperationType.REVOKE || item.type === this.SysFlowTaskOperationType.SIGN_REDUCTION;
              })
            }
          });
        }
      }).catch(e => {});
    }
  }
}
</script>

<style scoped>
.searchLabel{
  height: 34px;
  width: 85px;
  background: #F7F8FA;
  /* border-right: 2px solid #ff7700; */
  display: flex;
  flex-direction: row;
}
.searchLabel .line{
  height: 20px;
  width: 0;
  margin: auto 0px auto 12px;
  border-right: 1px solid #d9dbde;
  z-index: 999;
}
  .task-item + .task-item {
    margin-top: 15px;
  }
  .menu-box {
    border-top: 1px solid #f0efef;
    padding-top: 8px;
    margin-top: 10px;
  }
  .menu-box .user-box {
    height: 24px;
    display: flex;
    align-items: center;
  }
  .menu-box .user-box .text {
    color: #666666;
    font-size: 12px;
  }
  .userName{
    font-size: 12px;
    color: #666666;
    font-weight: 400;
  }
</style>
<style>
.van-dropdown-menu{
  height: 34px;
  background: #F7F8FA;
}
.van-dropdown-menu__item{
  height: 34px;
  background: #F7F8FA;
}
.van-dropdown-menu__bar{
  height: 34px !important;
  background: #F7F8FA;
  box-shadow: none !important;
}
.van-dropdown-menu__title{
  line-height: 34px;
  background: #F7F8FA;
  color: #000000;
  border: none;
}
.van-dropdown-item__option{
  padding: 10px 20px !important;
}
.van-dropdown-menu__title::after{
  right: -5px !important;
  margin-top: -6px !important;
  border: 4px solid !important;
  border-color: transparent transparent #17191c #17191c !important;
}
.van-dropdown-menu__title--active::after{
  border-color: transparent transparent #ff7700 #ff7700 !important;
}
</style>
